<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Scoping Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification defines scoping/encapsulation mechanisms for CSS, focusing on the Shadow DOM scoping mechanism." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-scoping-1/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-scoping-1_dev/css-scoping-1" type="text/javascript"></script>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Scoping Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-scoping/">https://drafts.csswg.org/css-scoping/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-scoping-1/">https://www.w3.org/TR/css-scoping-1/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/" rel="prev">https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-scoping-1_dev/nightly-unstable/">http://test.csswg.org/suites/css-scoping-1_dev/nightly-unstable/</a>
      <dt class="editor">Editor:
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-scoping-1/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-scoping-1">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines scoping/encapsulation mechanisms for CSS, focusing on the Shadow DOM scoping mechanism.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-scoping” in the title,
	preferably like this:
	“[css-scoping] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
    <li><a href="#default-element-styles"><span class="secno">2</span> <span class="content"> Default Styles for Custom Elements</span></a>
    <li>
     <a href="#shadow-dom"><span class="secno">3</span> <span class="content"> Shadow Encapsulation</span></a>
     <ol class="toc">
      <li><a href="#shadow-gloss"><span class="secno">3.1</span> <span class="content"> Informative Explanation of Shadow DOM</span></a>
      <li>
       <a href="#selectors"><span class="secno">3.2</span> <span class="content"> Shadow DOM and Selectors</span></a>
       <ol class="toc">
        <li><a href="#selectors-data-model"><span class="secno">3.2.1</span> <span class="content"> Matching Selectors Against Shadow Trees</span></a>
        <li><a href="#host-element-in-tree"><span class="secno">3.2.2</span> <span class="content"> Selecting Shadow Hosts from within a Shadow Tree</span></a>
        <li><a href="#host-selector"><span class="secno">3.2.3</span> <span class="content"> Selecting Into the Light: the <span class="css">:host</span>, <span class="css">:host()</span>, and <span class="css">:host-context()</span> pseudo-classes</span></a>
        <li><a href="#slotted-pseudo"><span class="secno">3.2.4</span> <span class="content"> Selecting Slot-Assigned Content: the <span class="css">::slotted()</span> pseudo-element</span></a>
       </ol>
      <li><a href="#shadow-cascading"><span class="secno">3.3</span> <span class="content"> Shadow Trees and the Cascade</span></a>
      <li>
       <a href="#flattening"><span class="secno">3.4</span> <span class="content"> Flattening the DOM into an Element Tree</span></a>
       <ol class="toc">
        <li><a href="#slots-in-shadow-tree"><span class="secno">3.4.1</span> <span class="content"> Slots and Slotted Elements in a Shadow Tree</span></a>
       </ol>
     </ol>
    <li><a href="#changes"><span class="secno">4</span> <span class="content"> Changes</span></a>
    <li><a href="#priv-sec"><span class="secno">5</span> <span class="content">Privacy and Security Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>...</p>
   <h2 class="heading settled" data-level="2" id="default-element-styles"><span class="secno">2. </span><span class="content"> Default Styles for Custom Elements</span><a class="self-link" href="#default-element-styles"></a></h2>
   <p>When defining <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element" id="ref-for-custom-element">custom elements</a>,
	one often wants to set up "default" styles for them,
	akin to the user-agent styles that apply to built-in elements.
	This is, unfortunately, hard to do in vanilla CSS,
	due to issues of scoping and specificity—<wbr>the element in question might be used in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree">shadow trees</a>,
	and thus is unreachable by any selector targeting it in the outermost document;
	and selectors, even low-specificity ones like simple <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector" id="ref-for-type-selector">type selectors</a>,
	can accidentally override author-level styles meant to target the element.</p>
   <p>To aid in this, this section defines a way
	to create a stylesheet of "default element styles" for a given element.
	This stylesheet applies across the entire document,
	in all <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①">shadow trees</a>,
	and the rules in it apply at the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user agent origin</a>,
	so author-level rules automatically win.</p>
   <p><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code>s gain a private slot <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-defaultelementstylesmap-slot"><code>[[defaultElementStylesMap]]</code></dfn> which is a map of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element-local-name" id="ref-for-concept-element-local-name">local names</a> to <a data-link-type="dfn">stylesheets</a>.</p>
   <p>These stylesheets must apply to every document in the window.
	They must be interpreted as user agent stylesheets.</p>
   <p class="note" role="note"><span>Note:</span> This implies, in particular,
	that they apply to all <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②">shadow trees</a> in every document,
	and that the declarations in them are from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua" id="ref-for-cascade-origin-ua①">user agent origin</a>.</p>
   <p>For the purpose of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade" id="ref-for-cascade">cascade</a>,
	these stylesheets are ordered after the user agent’s own stylesheets;
	their relative ordering doesn’t matter as it is not observable.</p>
   <p>Within these stylesheets, <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#complex" id="ref-for-complex">complex selectors</a> must be treated as invalid.
	Every <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#compound" id="ref-for-compound">compound selector</a> must be treated as containing an additional <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector" id="ref-for-type-selector①">type selector</a> that selects elements with the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element-local-name" id="ref-for-concept-element-local-name①">local name</a> that the stylesheet is keyed with.</p>
   <p class="issue" id="issue-f4e1dc6b"><a class="self-link" href="#issue-f4e1dc6b"></a> Do we need to restrict the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rules</a> that can be used in these sheets?
	For example, do we allow an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#at-font-face-rule" id="ref-for-at-font-face-rule">@font-face</a>?
	I’m going to leave it as allowed unless/until I hear complaints.</p>
   <p>This specification does not define how to add to, remove from, or generally manipulate
	the <code class="idl"><a data-link-type="idl" href="#dom-window-defaultelementstylesmap-slot" id="ref-for-dom-window-defaultelementstylesmap-slot">[[defaultElementStylesMap]]</a></code>.
	It is expected that other specifications,
	such as <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>,
	will define ways to do so.</p>
   <h2 class="heading settled" data-level="3" id="shadow-dom"><span class="secno">3. </span><span class="content"> Shadow Encapsulation</span><a class="self-link" href="#shadow-dom"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="shadow-gloss"><span class="secno">3.1. </span><span class="content"> Informative Explanation of Shadow DOM</span><a class="self-link" href="#shadow-gloss"></a></h3>
   <p><em>The following is a non-normative explanation
	of several concepts normatively defined in the DOM Standard <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>,
	to aid in understanding what this spec defines
	without having to fully grok the DOM Standard.</em></p>
   <p>In addition to the qualities of an element tree defined in <a href="https://www.w3.org/TR/selectors-4/#data-model">Selectors Level 4 §data-model</a>,
	the DOM Standard adds several new concepts related to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree③">shadow trees</a>,
	several of which are relevant to CSS.</p>
   <p>An element can host a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree④">shadow tree</a>,
	which is a special kind of document fragment
	with a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root">shadow root</a> (a non-element node)
	at its root.
	Children of the <span id="ref-for-concept-shadow-root①">shadow root</span> are ordinary elements and other nodes.
	The element hosting the <span id="ref-for-concept-shadow-tree⑤">shadow tree</span> is its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-documentfragment-host" id="ref-for-concept-documentfragment-host">host</a>,
	or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host">shadow host</a>.</p>
   <p>The elements in a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree⑥">shadow tree</a> are not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendants</a> of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①">shadow host</a> in general
	(including for the purposes of Selectors like the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#descendant-combinator" id="ref-for-descendant-combinator">descendant combinator</a>).
	However, the <span id="ref-for-concept-shadow-tree⑦">shadow tree</span>,
	when it exists,
	is used in the construction of the <a data-link-type="dfn" href="#flat-tree" id="ref-for-flat-tree">flattened element tree</a>,
	which CSS uses for all purposes <em>after</em> Selectors
	(including inheritance and box construction).</p>
   <p>Loosely, the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree⑧">shadow tree</a> is treated as the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host②">shadow host’s</a> contents
	instead of its normal <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree">light tree</a> contents.
	However, some of its <span id="ref-for-concept-light-tree①">light tree</span> children
	can be "pulled into" the <span id="ref-for-concept-shadow-tree⑨">shadow tree</span> by assigning them to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot">slots</a>.
	This causes them to be treated as children of the <span id="ref-for-concept-slot①">slot</span> for CSS purposes.
	The <span id="ref-for-concept-slot②">slots</span> can then be assigned to <span id="ref-for-concept-slot③">slots</span> in deeper <span id="ref-for-concept-shadow-tree①⓪">shadow trees</span>;
	luckily, <span id="ref-for-concept-slot④">slots</span> themselves don’t generate boxes by default,
	so you don’t get an unpredictable cascade of <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element" id="ref-for-the-slot-element">slot</a></code> wrapper elements
	disrupting your CSS.</p>
   <p>If nothing is explicitly assigned to a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot⑤">slot</a>,
	the <span id="ref-for-concept-slot⑥">slot’s</span> own children are instead assigned to it,
	as a sort of "default" contents.</p>
   <h3 class="heading settled" data-level="3.2" id="selectors"><span class="secno">3.2. </span><span class="content"> Shadow DOM and Selectors</span><a class="self-link" href="#selectors"></a></h3>
   <h4 class="heading settled" data-level="3.2.1" id="selectors-data-model"><span class="secno">3.2.1. </span><span class="content"> Matching Selectors Against Shadow Trees</span><a class="self-link" href="#selectors-data-model"></a></h4>
   <p>When a selector is matched against a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①①">shadow tree</a>,
	the <a data-link-type="dfn">selector match list</a> is initially the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host③">shadow host</a>,
	followed by all children of the <span id="ref-for-concept-shadow-tree①②">shadow tree’s</span> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root②">shadow root</a> and their descendants,
	ordered by a pre-order traversal.</p>
   <p class="note" role="note"><span>Note:</span> Remember that the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant①">descendants</a> of an element
	are based on the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree②">light tree</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child">children</a> of the element,
	which does not include the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①③">shadow trees</a> of the element.</p>
   <p>When a selector is <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#match-a-selector-against-a-tree" id="ref-for-match-a-selector-against-a-tree">matched against a tree</a>,
	its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="tree-context">tree context</dfn> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a> of the <var>root elements</var> passed to the algorithm.
	If the <a data-link-type="dfn" href="#tree-context" id="ref-for-tree-context">tree context</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root③">shadow root</a>,
	that selector is being matched <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="in the context of a shadow tree|in the context of the shadow tree" id="in-the-context-of-a-shadow-tree">in the context of a shadow tree</dfn>.</p>
   <div class="example" id="example-2165f0ef"><a class="self-link" href="#example-2165f0ef"></a> For example,
		any selector in a stylesheet embedded in or linked from an an element in a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①④">shadow tree</a> is <a data-link-type="dfn" href="#in-the-context-of-a-shadow-tree" id="ref-for-in-the-context-of-a-shadow-tree">in the context of a shadow tree</a>.
		So is the argument to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-parentnode-queryselector" id="ref-for-dom-parentnode-queryselector">querySelector()</a></code> when called from a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root④">shadow root</a>. </div>
   <p>Declarations inherit the <a data-link-type="dfn" href="#tree-context" id="ref-for-tree-context①">tree context</a> of the selector that was matched to apply them.</p>
   <h4 class="heading settled" data-level="3.2.2" id="host-element-in-tree"><span class="secno">3.2.2. </span><span class="content"> Selecting Shadow Hosts from within a Shadow Tree</span><a class="self-link" href="#host-element-in-tree"></a></h4>
   <p>A <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host④">shadow host</a> is outside of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①⑤">shadow tree</a> it hosts,
	and so would ordinarily be untargettable by any selectors evaluated <a data-link-type="dfn" href="#in-the-context-of-a-shadow-tree" id="ref-for-in-the-context-of-a-shadow-tree①">in the context of the shadow tree</a> (as selectors are limited to a single tree),
	but it is sometimes useful to be able to style it from inside the <span id="ref-for-concept-shadow-tree①⑥">shadow tree</span> context.</p>
   <p>For the purpose of Selectors,
	a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host⑤">shadow host</a> also appears in its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①⑦">shadow tree</a>,
	with the contents of the <span id="ref-for-concept-shadow-tree①⑧">shadow tree</span> treated as its children.
	(In other words, the <span id="ref-for-element-shadow-host⑥">shadow host</span> is treated as replacing the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root⑤">shadow root</a> node.)</p>
   <p>When considered within its own <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree①⑨">shadow trees</a>,
	the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host⑦">shadow host</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#featureless" id="ref-for-featureless">featureless</a>.
	Only the <a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host">:host</a>, <a class="css" data-link-type="maybe" href="#selectordef-host-function" id="ref-for-selectordef-host-function">:host()</a>, and <a class="css" data-link-type="maybe" href="#selectordef-host-context" id="ref-for-selectordef-host-context">:host-context()</a> pseudo-classes are allowed to match it.</p>
   <details class="note">
    <summary>Why is the shadow host so weird?</summary>
    <p>The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host⑧">shadow host</a> lives outside the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②⓪">shadow tree</a>,
		and its markup is in control of the page author,
		not the component author.</p>
    <p>It would not be very good if a component used a particular class name
		internally in a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②①">shadow tree</a> stylesheet,
		and the page author using the component accidentally <em>also</em> used the the same class name and put it on the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host⑨">shadow host</a>.
		Such a situation would result in accidental styling
		that is impossible for the component author to predict,
		and confusing for the page author to debug.</p>
    <p>However, there are still some reasonable use-cases for letting a stylesheet in a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②②">shadow tree</a> style its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①⓪">shadow host</a>.
		(For example,
		the component might want to be laid out as a flexbox,
		requiring the <span id="ref-for-element-shadow-host①①">shadow host</span> to be set to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display: flex</a>.)
		So, to allow this situation but prevent accidental styling,
		the <span id="ref-for-element-shadow-host①②">shadow host</span> appears but is completely featureless
		and unselectable except through <a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host①">:host</a> and its related functional forms,
		which make it very explicit when you’re trying to match against markup provided by the page author.</p>
   </details>
   <h4 class="heading settled" data-level="3.2.3" id="host-selector"><span class="secno">3.2.3. </span><span class="content"> Selecting Into the Light: the <a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host②">:host</a>, <a class="css" data-link-type="maybe" href="#selectordef-host-function" id="ref-for-selectordef-host-function①">:host()</a>, and <a class="css" data-link-type="maybe" href="#selectordef-host-context" id="ref-for-selectordef-host-context①">:host-context()</a> pseudo-classes</span><a class="self-link" href="#host-selector"></a></h4>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-host">:host</dfn> pseudo-class,
	when evaluated <a data-link-type="dfn" href="#in-the-context-of-a-shadow-tree" id="ref-for-in-the-context-of-a-shadow-tree②">in the context of a shadow tree</a>,
	matches the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②③">shadow tree’s</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①③">shadow host</a>.
	In any other context,
	it matches nothing.</p>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-host-function">:host()</dfn> function pseudo-class
	has the syntax:</p>
<pre>:host( <a class="production" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list" id="ref-for-typedef-compound-selector-list">&lt;compound-selector-list></a> )</pre>
   <p>When evaluated <a data-link-type="dfn" href="#in-the-context-of-a-shadow-tree" id="ref-for-in-the-context-of-a-shadow-tree③">in the context of a shadow tree</a>,
	it matches the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②④">shadow tree’s</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①④">shadow host</a> if the <span id="ref-for-element-shadow-host①⑤">shadow host</span>,
	in its normal context,
	matches the selector argument.
	In any other context,
	it matches nothing.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#specificity" id="ref-for-specificity">specificity</a> of <a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host③">:host</a> is that of a pseudo-class.
	The <span id="ref-for-specificity①">specificity</span> of <a class="css" data-link-type="maybe" href="#selectordef-host-function" id="ref-for-selectordef-host-function②">:host()</a> is that of a pseudo-class,
	plus the <span id="ref-for-specificity②">specificity</span> of its argument.</p>
   <p class="note" role="note"><span>Note:</span> This is different from the specificity of similar pseudo-classes,
	like <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#selectordef-matches" id="ref-for-selectordef-matches">:matches()</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#negation-pseudo" id="ref-for-negation-pseudo">:not()</a>,
	which <em>only</em> take the specificity of their argument.
	This is because <a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host④">:host</a> is affirmatively selecting an element all by itself,
	like a "normal" pseudo-class;
	it takes a selector argument for syntactic reasons
	(we can’t say that <span class="css">:host.foo</span> matches but <span class="css">.foo</span> doesn’t),
	but is otherwise identical
	to just using <span class="css" id="ref-for-selectordef-host⑤">:host</span> followed by a selector.</p>
   <div class="example" id="example-20a3843d">
    <a class="self-link" href="#example-20a3843d"></a> For example, say you had a component with a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②⑤">shadow tree</a> like the following: 
<pre>&lt;x-foo class="foo">
  &lt;"shadow tree">
    &lt;div class="foo">...&lt;/div>
  &lt;/>
&lt;/x-foo>
</pre>
    <p>For a stylesheet within the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②⑥">shadow tree</a>:</p>
    <ul>
     <li data-md>
      <p><a class="css" data-link-type="maybe" href="#selectordef-host" id="ref-for-selectordef-host⑥">:host</a> matches the <code>&lt;x-foo></code> element.</p>
     <li data-md>
      <p><span class="css">x-foo</span> matches nothing.</p>
     <li data-md>
      <p><span class="css">.foo</span> matches only the <code>&lt;div></code> element.</p>
     <li data-md>
      <p><span class="css">.foo:host</span> matches nothing</p>
     <li data-md>
      <p><span class="css">:host(.foo)</span> matches the <code>&lt;x-foo></code> element.</p>
    </ul>
   </div>
   <p>Ordinary, selectors within a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②⑦">shadow tree</a> can’t see elements outside the <span id="ref-for-concept-shadow-tree②⑧">shadow tree</span> at all.
	Sometimes, however, it’s useful to select an ancestor that lies somewhere outside the shadow tree,
	above it in the document.</p>
   <div class="example" id="example-91d45137"><a class="self-link" href="#example-91d45137"></a> For example, a group of components can define a handful of color themes
		they they know how to respond to.
		Page authors could opt into a particular theme
		by adding a specific class to the components,
		or higher up in the document. </div>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-host-context">:host-context()</dfn> functional pseudo-class tests whether there is an ancestor,
	outside the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree②⑨">shadow tree</a>,
	which matches a particular selector.
	Its syntax is:</p>
<pre class="prod">:host-context( <a class="production" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list" id="ref-for-typedef-compound-selector-list①">&lt;compound-selector-list></a> )</pre>
   <p>When evaluated <a data-link-type="dfn" href="#in-the-context-of-a-shadow-tree" id="ref-for-in-the-context-of-a-shadow-tree④">in the context of a shadow tree</a>,
	the <a class="css" data-link-type="maybe" href="#selectordef-host-context" id="ref-for-selectordef-host-context②">:host-context()</a> pseudo-class matches the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①⑥">shadow host</a>,
	if the <span id="ref-for-element-shadow-host①⑦">shadow host</span> or one of its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor" id="ref-for-concept-shadow-including-ancestor">shadow-including ancestors</a> matches the provided <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list" id="ref-for-typedef-compound-selector-list②">&lt;compound-selector-list></a>.
	In any other context,
	it matches nothing.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#specificity" id="ref-for-specificity③">specificity</a> of <a class="css" data-link-type="maybe" href="#selectordef-host-context" id="ref-for-selectordef-host-context③">:host-context()</a> is that of a pseudo-class,
	plus the <span id="ref-for-specificity④">specificity</span> of its argument.</p>
   <p class="note" role="note"><span>Note:</span> This means that the selector pierces through shadow boundaries on the way up,
	looking for elements that match its argument,
	until it reaches the document root.</p>
   <h4 class="heading settled" data-level="3.2.4" id="slotted-pseudo"><span class="secno">3.2.4. </span><span class="content"> Selecting Slot-Assigned Content: the <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted">::slotted()</a> pseudo-element</span><a class="self-link" href="#slotted-pseudo"></a></h4>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-slotted">::slotted()</dfn> pseudo-element
	represents the elements <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#find-flattened-slotables" id="ref-for-find-flattened-slotables">assigned, after flattening,</a> to a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot⑦">slot</a>.
	This pseudo-element only exists on <span id="ref-for-concept-slot⑧">slots</span>.</p>
   <p>The <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted①">::slotted()</a> pseudo-element is an <em>alias</em> for other elements in the tree,
	and does not generate any boxes itself.</p>
   <p>The grammar of the <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted②">::slotted()</a> pseudo-element is:</p>
<pre class="prod">::slotted( <a class="production" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list" id="ref-for-typedef-compound-selector-list③">&lt;compound-selector-list></a> )</pre>
   <p>The <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted③">::slotted()</a> pseudo-element represents the elements that are:</p>
   <ul>
    <li data-md>
     <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#find-flattened-slotables" id="ref-for-find-flattened-slotables①">assigned, after flattening,</a> to the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot⑨">slot</a> that is <span class="css">::slotted</span>’s originating element</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#match-a-selector-against-an-element" id="ref-for-match-a-selector-against-an-element">matched</a> by its <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list" id="ref-for-typedef-compound-selector-list④">&lt;compound-selector-list></a> argument</p>
   </ul>
   <p>The <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted④">::slotted()</a> pseudo-element can be followed by a <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding">tree-abiding pseudo-element</a>,
	like <span class="css">::slotted()::before</span>,
	representing the appropriate pseudo-element of the elements represented by the <span class="css" id="ref-for-selectordef-slotted⑤">::slotted()</span> pseudo-element.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#specificity" id="ref-for-specificity⑤">specificity</a> of <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted⑥">::slotted()</a> is that of a pseudo-element,
	plus the <span id="ref-for-specificity⑥">specificity</span> of its argument.</p>
   <div class="example" id="example-7cc70c2d">
    <a class="self-link" href="#example-7cc70c2d"></a> For example, say you had a component with both children and a shadow tree,
		like the following: 
<pre>&lt;x-foo>
  &lt;div id="one" slot="foo" class="foo">...&lt;/div>
  &lt;div id="two" slot="foo">...&lt;/div>
  &lt;div id="three" class="foo">
    &lt;div id="four" slot="foo">...&lt;/div>
  &lt;/div>
  &lt;"shadow tree">
    &lt;div id="five">...&lt;/div>
    &lt;div id="six">...&lt;/div>
    &lt;slot name="foo">&lt;/slot>
  &lt;/"shadow tree">
&lt;/x-foo>
</pre>
    <p>For a stylesheet within the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree③⓪">shadow tree</a>,
		a selector like <span class="css">::slotted(*)</span> selects <span class="css">#one</span> and <span class="css">#two</span> only,
		as they’re the elements <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#find-flattened-slotables" id="ref-for-find-flattened-slotables②">assigned</a> to the sole <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element" id="ref-for-the-slot-element①">slot</a></code> element.
		It will <em>not</em> select <span class="css">#three</span> (no <code>slot</code> attribute)
		nor <span class="css">#four</span> (only direct <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child①">children</a> of a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①⑧">shadow host</a> can be assigned to a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①⓪">slot</a>).</p>
    <p>A selector like <span class="css">::slotted(.foo)</span>,
		on the other hand,
		will only select <span class="css">#one</span>,
		as it matches <span class="css">.foo</span>,
		but <span class="css">#two</span> doesn’t.</p>
    <p class="note" role="note"><span>Note:</span> Note that a selector like <span class="css">::slotted(*)</span> is equivalent to <span class="css">*::slotted(*)</span>,
		where the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-3/#x" id="ref-for-x">*</a> selects many more elements than just the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element" id="ref-for-the-slot-element②">slot</a></code> element.
		However, since only the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element" id="ref-for-the-slot-element③">slot</a></code> elements are <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①①">slots</a>,
		they’re the only elements with a <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted⑦">::slotted()</a> pseudo-element as well.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted⑧">::slotted()</a> can only represent the <em>elements</em> assigned to the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①②">slot</a>. <span id="ref-for-concept-slot①③">Slots</span> can also be assigned text nodes,
	which can’t be selected by <span class="css" id="ref-for-selectordef-slotted⑨">::slotted()</span>.
	The only way to style assigned text nodes
	is by styling the <span id="ref-for-concept-slot①④">slot</span> and relying on inheritance.</p>
   <h3 class="heading settled" data-level="3.3" id="shadow-cascading"><span class="secno">3.3. </span><span class="content"> Shadow Trees and the Cascade</span><a class="self-link" href="#shadow-cascading"></a></h3>
   <p>To address the desired cascading behavior of rules targetting elements in shadow roots,
	this specification extends the <a href="https://drafts.csswg.org/css-cascade/#cascading">cascade order</a> defined in the Cascade specification. <a data-link-type="biblio" href="#biblio-css3cascade">[CSS3CASCADE]</a></p>
   <p>An additional cascade criteria must be added,
	between Origin and Scope,
	called Shadow Tree.</p>
   <ul>
    <li data-md>
     <p>When comparing two declarations
that have different <a data-link-type="dfn" href="#tree-context" id="ref-for-tree-context②">tree contexts</a>,
then for normal rules the declaration earlier in the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order" id="ref-for-concept-shadow-including-tree-order">shadow-including tree order</a> wins,
and for important rules the declaration coming later in the <span id="ref-for-concept-shadow-including-tree-order①">shadow-including tree order</span> wins.</p>
     <p class="note" role="note"><span>Note:</span> This is the <em>opposite</em> of how scoped styles work.</p>
   </ul>
   <h3 class="heading settled algorithm" data-algorithm="Flattening the DOM into an Element Tree" data-level="3.4" id="flattening"><span class="secno">3.4. </span><span class="content"> Flattening the DOM into an Element Tree</span><a class="self-link" href="#flattening"></a></h3>
   <p>While Selectors operates on the DOM tree as the host language presents it,
	with separate trees that are unreachable via the standard parent/<a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child②">child</a> relationship,
	the rest of CSS needs a single unified tree structure to work with.
	This is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flat tree|flattened element tree" id="flat-tree">flattened element tree</dfn> (or <a data-link-type="dfn" href="#flat-tree" id="ref-for-flat-tree①">flat tree</a>),
	and is constructed as follows:</p>
   <ol>
    <li data-md>
     <p>Let <var>pending nodes</var> be a list of DOM nodes with associated parents,
initially containing just the document’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root①">root</a> element with no associated parent.</p>
    <li data-md>
     <p>Repeatedly execute the following substeps until <var>pending nodes</var> is empty:</p>
     <ol>
      <li data-md>
       <p>Pop the first element from <var>pending nodes</var>,
and assign it to <var>pending node</var>.</p>
      <li data-md>
       <p>Insert <var>pending node</var> into the <a data-link-type="dfn" href="#flat-tree" id="ref-for-flat-tree②">flat tree</a> as a child of its associated parent.
(If it has no associated parent,
it’s the document root—<wbr>just insert it into the <span id="ref-for-flat-tree③">flat tree</span> as its root.)</p>
      <li data-md>
       <p>Perform one of the following,
whichever is the first that matches:</p>
       <dl class="switch">
        <dt><var>pending node</var> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host①⑨">shadow host</a> 
        <dd> Append the child nodes of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-root" id="ref-for-concept-shadow-root⑥">shadow root</a> of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree③①">shadow tree</a> it hosts
		to <var>pending nodes</var>,
		with <var>pending node</var> as their associated parent. 
        <dt><var>pending node</var> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①⑤">slot</a> 
        <dd>
          <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#find-slotables" id="ref-for-find-slotables">Find slotables</a> for <var>pending node</var>,
		and append them to <var>pending nodes</var>,
		with <var>pending node</var> as their associated parent. 
         <p>If no <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slotable" id="ref-for-concept-slotable">slotables</a> were found for <var>pending node</var>,
		instead append its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child③">children</a> to <var>pending nodes</var>,
		with <var>pending node</var> as their associated parent.</p>
        <dt>Otherwise, 
        <dd> Append the child nodes of <var>pending node</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree③">light tree</a> to <var>pending nodes</var>,
		with <var>pending node</var> as their associated parent. 
       </dl>
     </ol>
   </ol>
   <p class="note" role="note"><span>Note:</span> In other words, the <a data-link-type="dfn" href="#flat-tree" id="ref-for-flat-tree④">flat tree</a> is the top-level DOM tree,
	but <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#element-shadow-host" id="ref-for-element-shadow-host②⓪">shadow hosts</a> are filled with their <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree③②">shadow tree</a> children
	instead of their <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree④">light tree</a> children
	(and this proceeds recursively if the <span id="ref-for-concept-shadow-tree③③">shadow tree</span> contains any <span id="ref-for-element-shadow-host②①">shadow hosts</span>),
	and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①⑥">slots</a> get filled with the nodes that are assigned to them
	(and this proceeds recursively if the <span id="ref-for-concept-slot①⑦">slots</span> are themselves
	assigned to a <span id="ref-for-concept-slot①⑧">slot</span> in a deeper <span id="ref-for-concept-shadow-tree③④">shadow tree</span>).</p>
   <p class="issue" id="issue-75772618"><a class="self-link" href="#issue-75772618"></a> A non-obvious result of this
	is that elements assigned to a slot inherit from that slot,
	not their light-tree parent
	or any deeper slots their slot gets assigned to.
	This means that text nodes are styled by the shadow tree of their parent,
	with nobody else capable of intervening in any way.
	Do we want an additional pseudo-element for targeting those text nodes
	so they can be styled at all slot-assignment levels,
	like normal elements can be?
	This implies it needs to work for text nodes in the light tree
	before they’re assigned downwards,
	so this can’t just be a <a class="css" data-link-type="maybe" href="#selectordef-slotted" id="ref-for-selectordef-slotted①⓪">::slotted()</a> variant.
	Luckily, this is a long-standing request!</p>
   <h4 class="heading settled" data-level="3.4.1" id="slots-in-shadow-tree"><span class="secno">3.4.1. </span><span class="content"> Slots and Slotted Elements in a Shadow Tree</span><a class="self-link" href="#slots-in-shadow-tree"></a></h4>
   <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot①⑨">Slots</a> must act as if they were assigned <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display: contents</a> via a rule in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua" id="ref-for-cascade-origin-ua②">UA origin</a>.
	This must be possible to override via <span class="property" id="ref-for-propdef-display②">display</span>,
	so they <em>do</em> generate boxes if desired.</p>
   <p class="note" role="note"><span>Note:</span> A non-obvious result of assigning elements to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-slot" id="ref-for-concept-slot②⓪">slots</a> is that they <a data-link-type="dfn">inherit</a> from the <span id="ref-for-concept-slot②①">slot</span> they’re assigned to.
	Their original <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree⑤">light tree</a> parent,
	and any deeper <span id="ref-for-concept-slot②②">slots</span> that their <span id="ref-for-concept-slot②③">slot</span> gets assigned to,
	don’t affect inheritance.</p>
   <h2 class="heading settled" data-level="4" id="changes"><span class="secno">4. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>The following significant changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/">3 April 2014 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Renamed <span class="css">::content</span> to <span class="css">::slotted</span>.</p>
    <li data-md>
     <p>Define the flattened tree</p>
    <li data-md>
     <p>Generally reorg and rebase the Shadow DOM section on top of current DOM.</p>
    <li data-md>
     <p>Punt <span class="css">@scope</span> and related things,
and <span class="css">::region</span> and related things,
to the next level of the draft.</p>
   </ul>
   <h2 class="heading settled" data-level="5" id="priv-sec"><span class="secno">5. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>This specification introduces Shadow DOM and some shadow-piercing capabilities,
but this does not introduce any privacy or security issues—<wbr>shadow DOM, as currently specified, is intentionally not a privacy/security boundary
(and the parts of the UA that use shadow DOM and <em>do</em> have a privacy/security boundary
implicitly rely on protections not yet specified,
which protect them from the things defined in this specification).</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-window-defaultelementstylesmap-slot">[[defaultElementStylesMap]]</a><span>, in §2</span>
   <li><a href="#flat-tree">flattened element tree</a><span>, in §3.4</span>
   <li><a href="#flat-tree">flat tree</a><span>, in §3.4</span>
   <li><a href="#selectordef-host-function">:host()</a><span>, in §3.2.3</span>
   <li><a href="#selectordef-host">:host</a><span>, in §3.2.3</span>
   <li><a href="#selectordef-host-context">:host-context()</a><span>, in §3.2.3</span>
   <li><a href="#in-the-context-of-a-shadow-tree">in the context of a shadow tree</a><span>, in §3.2.1</span>
   <li><a href="#in-the-context-of-a-shadow-tree">in the context of the shadow tree</a><span>, in §3.2.1</span>
   <li><a href="#selectordef-slotted">::slotted()</a><span>, in §3.2.4</span>
   <li><a href="#tree-context">tree context</a><span>, in §3.2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cascade">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade">https://drafts.csswg.org/css-cascade-4/#cascade</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cascade-origin-ua">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua">https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade-origin-ua">2. 
Default Styles for Custom Elements</a> <a href="#ref-for-cascade-origin-ua①">(2)</a>
    <li><a href="#ref-for-cascade-origin-ua②">3.4.1. 
Slots and Slotted Elements in a Shadow Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cascade-origin-ua">
   <a href="https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua">https://drafts.csswg.org/css-cascade-4/#cascade-origin-ua</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade-origin-ua">2. 
Default Styles for Custom Elements</a> <a href="#ref-for-cascade-origin-ua①">(2)</a>
    <li><a href="#ref-for-cascade-origin-ua②">3.4.1. 
Slots and Slotted Elements in a Shadow Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
    <li><a href="#ref-for-propdef-display①">3.4.1. 
Slots and Slotted Elements in a Shadow Tree</a> <a href="#ref-for-propdef-display②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-font-face-rule">
   <a href="https://drafts.csswg.org/css-fonts-4/#at-font-face-rule">https://drafts.csswg.org/css-fonts-4/#at-font-face-rule</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-font-face-rule">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-tree-abiding">
   <a href="https://drafts.csswg.org/css-pseudo-4/#tree-abiding">https://drafts.csswg.org/css-pseudo-4/#tree-abiding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tree-abiding">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-rule">
   <a href="https://drafts.csswg.org/css-syntax-3/#at-rule">https://drafts.csswg.org/css-syntax-3/#at-rule</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-rule">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-child">
   <a href="https://dom.spec.whatwg.org/#concept-tree-child">https://dom.spec.whatwg.org/#concept-tree-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-child">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-concept-tree-child①">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
    <li><a href="#ref-for-concept-tree-child②">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-concept-tree-child③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-child">
   <a href="https://dom.spec.whatwg.org/#concept-tree-child">https://dom.spec.whatwg.org/#concept-tree-child</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-child">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-concept-tree-child①">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
    <li><a href="#ref-for-concept-tree-child②">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-concept-tree-child③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-tree-descendant">https://dom.spec.whatwg.org/#concept-tree-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-descendant">3.1. 
Informative Explanation of Shadow DOM</a>
    <li><a href="#ref-for-concept-tree-descendant①">3.2.1. 
Matching Selectors Against Shadow Trees</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-find-flattened-slotables">
   <a href="https://dom.spec.whatwg.org/#find-flattened-slotables">https://dom.spec.whatwg.org/#find-flattened-slotables</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-find-flattened-slotables">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-find-flattened-slotables①">(2)</a> <a href="#ref-for-find-flattened-slotables②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-find-slotables">
   <a href="https://dom.spec.whatwg.org/#find-slotables">https://dom.spec.whatwg.org/#find-slotables</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-find-slotables">3.4. 
Flattening the DOM into an Element Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-documentfragment-host">
   <a href="https://dom.spec.whatwg.org/#concept-documentfragment-host">https://dom.spec.whatwg.org/#concept-documentfragment-host</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-documentfragment-host">3.1. 
Informative Explanation of Shadow DOM</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-light-tree">
   <a href="https://dom.spec.whatwg.org/#concept-light-tree">https://dom.spec.whatwg.org/#concept-light-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-light-tree">3.1. 
Informative Explanation of Shadow DOM</a> <a href="#ref-for-concept-light-tree①">(2)</a>
    <li><a href="#ref-for-concept-light-tree②">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-concept-light-tree③">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-concept-light-tree④">(2)</a>
    <li><a href="#ref-for-concept-light-tree⑤">3.4.1. 
Slots and Slotted Elements in a Shadow Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-element-local-name">
   <a href="https://dom.spec.whatwg.org/#concept-element-local-name">https://dom.spec.whatwg.org/#concept-element-local-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-element-local-name">2. 
Default Styles for Custom Elements</a> <a href="#ref-for-concept-element-local-name①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-parentnode-queryselector">
   <a href="https://dom.spec.whatwg.org/#dom-parentnode-queryselector">https://dom.spec.whatwg.org/#dom-parentnode-queryselector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-parentnode-queryselector">3.2.1. 
Matching Selectors Against Shadow Trees</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-tree-root">
   <a href="https://dom.spec.whatwg.org/#concept-tree-root">https://dom.spec.whatwg.org/#concept-tree-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-tree-root">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-concept-tree-root①">3.4. 
Flattening the DOM into an Element Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element-shadow-host">
   <a href="https://dom.spec.whatwg.org/#element-shadow-host">https://dom.spec.whatwg.org/#element-shadow-host</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-shadow-host">3.1. 
Informative Explanation of Shadow DOM</a> <a href="#ref-for-element-shadow-host①">(2)</a> <a href="#ref-for-element-shadow-host②">(3)</a>
    <li><a href="#ref-for-element-shadow-host③">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-element-shadow-host④">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a> <a href="#ref-for-element-shadow-host⑤">(2)</a> <a href="#ref-for-element-shadow-host⑥">(3)</a> <a href="#ref-for-element-shadow-host⑦">(4)</a> <a href="#ref-for-element-shadow-host⑧">(5)</a> <a href="#ref-for-element-shadow-host⑨">(6)</a> <a href="#ref-for-element-shadow-host①⓪">(7)</a> <a href="#ref-for-element-shadow-host①①">(8)</a> <a href="#ref-for-element-shadow-host①②">(9)</a>
    <li><a href="#ref-for-element-shadow-host①③">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-element-shadow-host①④">(2)</a> <a href="#ref-for-element-shadow-host①⑤">(3)</a> <a href="#ref-for-element-shadow-host①⑥">(4)</a> <a href="#ref-for-element-shadow-host①⑦">(5)</a>
    <li><a href="#ref-for-element-shadow-host①⑧">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
    <li><a href="#ref-for-element-shadow-host①⑨">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-element-shadow-host②⓪">(2)</a> <a href="#ref-for-element-shadow-host②①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-root">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-root">https://dom.spec.whatwg.org/#concept-shadow-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-root">3.1. 
Informative Explanation of Shadow DOM</a> <a href="#ref-for-concept-shadow-root①">(2)</a>
    <li><a href="#ref-for-concept-shadow-root②">3.2.1. 
Matching Selectors Against Shadow Trees</a> <a href="#ref-for-concept-shadow-root③">(2)</a> <a href="#ref-for-concept-shadow-root④">(3)</a>
    <li><a href="#ref-for-concept-shadow-root⑤">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
    <li><a href="#ref-for-concept-shadow-root⑥">3.4. 
Flattening the DOM into an Element Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-tree">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-tree">https://dom.spec.whatwg.org/#concept-shadow-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-tree">2. 
Default Styles for Custom Elements</a> <a href="#ref-for-concept-shadow-tree①">(2)</a> <a href="#ref-for-concept-shadow-tree②">(3)</a>
    <li><a href="#ref-for-concept-shadow-tree③">3.1. 
Informative Explanation of Shadow DOM</a> <a href="#ref-for-concept-shadow-tree④">(2)</a> <a href="#ref-for-concept-shadow-tree⑤">(3)</a> <a href="#ref-for-concept-shadow-tree⑥">(4)</a> <a href="#ref-for-concept-shadow-tree⑦">(5)</a> <a href="#ref-for-concept-shadow-tree⑧">(6)</a> <a href="#ref-for-concept-shadow-tree⑨">(7)</a> <a href="#ref-for-concept-shadow-tree①⓪">(8)</a>
    <li><a href="#ref-for-concept-shadow-tree①①">3.2.1. 
Matching Selectors Against Shadow Trees</a> <a href="#ref-for-concept-shadow-tree①②">(2)</a> <a href="#ref-for-concept-shadow-tree①③">(3)</a> <a href="#ref-for-concept-shadow-tree①④">(4)</a>
    <li><a href="#ref-for-concept-shadow-tree①⑤">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a> <a href="#ref-for-concept-shadow-tree①⑥">(2)</a> <a href="#ref-for-concept-shadow-tree①⑦">(3)</a> <a href="#ref-for-concept-shadow-tree①⑧">(4)</a> <a href="#ref-for-concept-shadow-tree①⑨">(5)</a> <a href="#ref-for-concept-shadow-tree②⓪">(6)</a> <a href="#ref-for-concept-shadow-tree②①">(7)</a> <a href="#ref-for-concept-shadow-tree②②">(8)</a>
    <li><a href="#ref-for-concept-shadow-tree②③">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-concept-shadow-tree②④">(2)</a> <a href="#ref-for-concept-shadow-tree②⑤">(3)</a> <a href="#ref-for-concept-shadow-tree②⑥">(4)</a> <a href="#ref-for-concept-shadow-tree②⑦">(5)</a> <a href="#ref-for-concept-shadow-tree②⑧">(6)</a> <a href="#ref-for-concept-shadow-tree②⑨">(7)</a>
    <li><a href="#ref-for-concept-shadow-tree③⓪">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
    <li><a href="#ref-for-concept-shadow-tree③①">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-concept-shadow-tree③②">(2)</a> <a href="#ref-for-concept-shadow-tree③③">(3)</a> <a href="#ref-for-concept-shadow-tree③④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-including-ancestor">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-including-ancestor">https://dom.spec.whatwg.org/#concept-shadow-including-ancestor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-including-ancestor">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-including-tree-order">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">https://dom.spec.whatwg.org/#concept-shadow-including-tree-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-including-tree-order">3.3. 
Shadow Trees and the Cascade</a> <a href="#ref-for-concept-shadow-including-tree-order①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-slot">
   <a href="https://dom.spec.whatwg.org/#concept-slot">https://dom.spec.whatwg.org/#concept-slot</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-slot">3.1. 
Informative Explanation of Shadow DOM</a> <a href="#ref-for-concept-slot①">(2)</a> <a href="#ref-for-concept-slot②">(3)</a> <a href="#ref-for-concept-slot③">(4)</a> <a href="#ref-for-concept-slot④">(5)</a> <a href="#ref-for-concept-slot⑤">(6)</a> <a href="#ref-for-concept-slot⑥">(7)</a>
    <li><a href="#ref-for-concept-slot⑦">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-concept-slot⑧">(2)</a> <a href="#ref-for-concept-slot⑨">(3)</a> <a href="#ref-for-concept-slot①⓪">(4)</a> <a href="#ref-for-concept-slot①①">(5)</a> <a href="#ref-for-concept-slot①②">(6)</a> <a href="#ref-for-concept-slot①③">(7)</a> <a href="#ref-for-concept-slot①④">(8)</a>
    <li><a href="#ref-for-concept-slot①⑤">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-concept-slot①⑥">(2)</a> <a href="#ref-for-concept-slot①⑦">(3)</a> <a href="#ref-for-concept-slot①⑧">(4)</a>
    <li><a href="#ref-for-concept-slot①⑨">3.4.1. 
Slots and Slotted Elements in a Shadow Tree</a> <a href="#ref-for-concept-slot②⓪">(2)</a> <a href="#ref-for-concept-slot②①">(3)</a> <a href="#ref-for-concept-slot②②">(4)</a> <a href="#ref-for-concept-slot②③">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-slotable">
   <a href="https://dom.spec.whatwg.org/#concept-slotable">https://dom.spec.whatwg.org/#concept-slotable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-slotable">3.4. 
Flattening the DOM into an Element Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-element">
   <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element">https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-element">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-slot-element">
   <a href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element">https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-slot-element">3.1. 
Informative Explanation of Shadow DOM</a>
    <li><a href="#ref-for-the-slot-element①">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-the-slot-element②">(2)</a> <a href="#ref-for-the-slot-element③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-x">
   <a href="https://drafts.csswg.org/selectors-3/#x">https://drafts.csswg.org/selectors-3/#x</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-x">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-matches">
   <a href="https://drafts.csswg.org/selectors-4/#selectordef-matches">https://drafts.csswg.org/selectors-4/#selectordef-matches</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-matches">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-negation-pseudo">
   <a href="https://drafts.csswg.org/selectors-4/#negation-pseudo">https://drafts.csswg.org/selectors-4/#negation-pseudo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-negation-pseudo">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-compound-selector-list">
   <a href="https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list">https://drafts.csswg.org/selectors-4/#typedef-compound-selector-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-compound-selector-list">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-typedef-compound-selector-list①">(2)</a> <a href="#ref-for-typedef-compound-selector-list②">(3)</a>
    <li><a href="#ref-for-typedef-compound-selector-list③">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-typedef-compound-selector-list④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-complex">
   <a href="https://drafts.csswg.org/selectors-4/#complex">https://drafts.csswg.org/selectors-4/#complex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-complex">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-compound">
   <a href="https://drafts.csswg.org/selectors-4/#compound">https://drafts.csswg.org/selectors-4/#compound</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-compound">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-descendant-combinator">
   <a href="https://drafts.csswg.org/selectors-4/#descendant-combinator">https://drafts.csswg.org/selectors-4/#descendant-combinator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-descendant-combinator">3.1. 
Informative Explanation of Shadow DOM</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-featureless">
   <a href="https://drafts.csswg.org/selectors-4/#featureless">https://drafts.csswg.org/selectors-4/#featureless</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-featureless">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-match-a-selector-against-a-tree">
   <a href="https://drafts.csswg.org/selectors-4/#match-a-selector-against-a-tree">https://drafts.csswg.org/selectors-4/#match-a-selector-against-a-tree</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-match-a-selector-against-a-tree">3.2.1. 
Matching Selectors Against Shadow Trees</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-match-a-selector-against-an-element">
   <a href="https://drafts.csswg.org/selectors-4/#match-a-selector-against-an-element">https://drafts.csswg.org/selectors-4/#match-a-selector-against-an-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-match-a-selector-against-an-element">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specificity">
   <a href="https://drafts.csswg.org/selectors-4/#specificity">https://drafts.csswg.org/selectors-4/#specificity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specificity">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-specificity①">(2)</a> <a href="#ref-for-specificity②">(3)</a> <a href="#ref-for-specificity③">(4)</a> <a href="#ref-for-specificity④">(5)</a>
    <li><a href="#ref-for-specificity⑤">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-specificity⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-type-selector">
   <a href="https://drafts.csswg.org/selectors-4/#type-selector">https://drafts.csswg.org/selectors-4/#type-selector</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-type-selector">2. 
Default Styles for Custom Elements</a> <a href="#ref-for-type-selector①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cascade" style="color:initial">cascade</span>
     <li><span class="dfn-paneled" id="term-for-cascade-origin-ua" style="color:initial">ua origin</span>
     <li><span class="dfn-paneled" id="term-for-cascade-origin-ua①" style="color:initial">user agent origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-font-face-rule" style="color:initial">@font-face</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-pseudo-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-tree-abiding" style="color:initial">tree-abiding pseudo-element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-rule" style="color:initial">at-rule</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-tree-child" style="color:initial">child</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-child①" style="color:initial">children</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-descendant" style="color:initial">descendant</span>
     <li><span class="dfn-paneled" id="term-for-find-flattened-slotables" style="color:initial">find flattened slotables</span>
     <li><span class="dfn-paneled" id="term-for-find-slotables" style="color:initial">find slotables</span>
     <li><span class="dfn-paneled" id="term-for-concept-documentfragment-host" style="color:initial">host</span>
     <li><span class="dfn-paneled" id="term-for-concept-light-tree" style="color:initial">light tree</span>
     <li><span class="dfn-paneled" id="term-for-concept-element-local-name" style="color:initial">local name</span>
     <li><span class="dfn-paneled" id="term-for-dom-parentnode-queryselector" style="color:initial">querySelector(selectors)</span>
     <li><span class="dfn-paneled" id="term-for-concept-tree-root" style="color:initial">root</span>
     <li><span class="dfn-paneled" id="term-for-element-shadow-host" style="color:initial">shadow host</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-root" style="color:initial">shadow root</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-tree" style="color:initial">shadow tree</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-including-ancestor" style="color:initial">shadow-including ancestor</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-including-tree-order" style="color:initial">shadow-including tree order</span>
     <li><span class="dfn-paneled" id="term-for-concept-slot" style="color:initial">slot</span>
     <li><span class="dfn-paneled" id="term-for-concept-slotable" style="color:initial">slotable</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-custom-element" style="color:initial">custom element</span>
     <li><span class="dfn-paneled" id="term-for-the-slot-element" style="color:initial">slot</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-x" style="color:initial">*</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-matches" style="color:initial">:matches()</span>
     <li><span class="dfn-paneled" id="term-for-negation-pseudo" style="color:initial">:not()</span>
     <li><span class="dfn-paneled" id="term-for-typedef-compound-selector-list" style="color:initial">&lt;compound-selector-list></span>
     <li><span class="dfn-paneled" id="term-for-complex" style="color:initial">complex selector</span>
     <li><span class="dfn-paneled" id="term-for-compound" style="color:initial">compound selector</span>
     <li><span class="dfn-paneled" id="term-for-descendant-combinator" style="color:initial">descendant combinator</span>
     <li><span class="dfn-paneled" id="term-for-featureless" style="color:initial">featureless</span>
     <li><span class="dfn-paneled" id="term-for-match-a-selector-against-a-tree" style="color:initial">match a selector against a tree</span>
     <li><span class="dfn-paneled" id="term-for-match-a-selector-against-an-element" style="color:initial">match a selector against an element</span>
     <li><span class="dfn-paneled" id="term-for-specificity" style="color:initial">specificity</span>
     <li><span class="dfn-paneled" id="term-for-type-selector" style="color:initial">type selector</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css3cascade">[CSS3CASCADE]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-selectors-3">[SELECTORS-3]
   <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Do we need to restrict the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule">at-rules</a> that can be used in these sheets?
	For example, do we allow an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#at-font-face-rule">@font-face</a>?
	I’m going to leave it as allowed unless/until I hear complaints.<a href="#issue-f4e1dc6b"> ↵ </a></div>
   <div class="issue"> A non-obvious result of this
	is that elements assigned to a slot inherit from that slot,
	not their light-tree parent
	or any deeper slots their slot gets assigned to.
	This means that text nodes are styled by the shadow tree of their parent,
	with nobody else capable of intervening in any way.
	Do we want an additional pseudo-element for targeting those text nodes
	so they can be styled at all slot-assignment levels,
	like normal elements can be?
	This implies it needs to work for text nodes in the light tree
	before they’re assigned downwards,
	so this can’t just be a <a class="css" data-link-type="maybe" href="#selectordef-slotted">::slotted()</a> variant.
	Luckily, this is a long-standing request!<a href="#issue-75772618"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="dom-window-defaultelementstylesmap-slot">
   <b><a href="#dom-window-defaultelementstylesmap-slot">#dom-window-defaultelementstylesmap-slot</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-defaultelementstylesmap-slot">2. 
Default Styles for Custom Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="tree-context">
   <b><a href="#tree-context">#tree-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tree-context">3.2.1. 
Matching Selectors Against Shadow Trees</a> <a href="#ref-for-tree-context①">(2)</a>
    <li><a href="#ref-for-tree-context②">3.3. 
Shadow Trees and the Cascade</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-the-context-of-a-shadow-tree">
   <b><a href="#in-the-context-of-a-shadow-tree">#in-the-context-of-a-shadow-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-the-context-of-a-shadow-tree">3.2.1. 
Matching Selectors Against Shadow Trees</a>
    <li><a href="#ref-for-in-the-context-of-a-shadow-tree①">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
    <li><a href="#ref-for-in-the-context-of-a-shadow-tree②">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-in-the-context-of-a-shadow-tree③">(2)</a> <a href="#ref-for-in-the-context-of-a-shadow-tree④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="selectordef-host">
   <b><a href="#selectordef-host">#selectordef-host</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-host">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a> <a href="#ref-for-selectordef-host①">(2)</a>
    <li><a href="#ref-for-selectordef-host②">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-selectordef-host③">(2)</a> <a href="#ref-for-selectordef-host④">(3)</a> <a href="#ref-for-selectordef-host⑤">(4)</a> <a href="#ref-for-selectordef-host⑥">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="selectordef-host-function">
   <b><a href="#selectordef-host-function">#selectordef-host-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-host-function">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
    <li><a href="#ref-for-selectordef-host-function①">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-selectordef-host-function②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="selectordef-host-context">
   <b><a href="#selectordef-host-context">#selectordef-host-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-host-context">3.2.2. 
Selecting Shadow Hosts from within a Shadow Tree</a>
    <li><a href="#ref-for-selectordef-host-context①">3.2.3. 
Selecting Into the Light: the :host, :host(), and :host-context() pseudo-classes</a> <a href="#ref-for-selectordef-host-context②">(2)</a> <a href="#ref-for-selectordef-host-context③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="selectordef-slotted">
   <b><a href="#selectordef-slotted">#selectordef-slotted</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-slotted">3.2.4. 
Selecting Slot-Assigned Content: the ::slotted() pseudo-element</a> <a href="#ref-for-selectordef-slotted①">(2)</a> <a href="#ref-for-selectordef-slotted②">(3)</a> <a href="#ref-for-selectordef-slotted③">(4)</a> <a href="#ref-for-selectordef-slotted④">(5)</a> <a href="#ref-for-selectordef-slotted⑤">(6)</a> <a href="#ref-for-selectordef-slotted⑥">(7)</a> <a href="#ref-for-selectordef-slotted⑦">(8)</a> <a href="#ref-for-selectordef-slotted⑧">(9)</a> <a href="#ref-for-selectordef-slotted⑨">(10)</a>
    <li><a href="#ref-for-selectordef-slotted①⓪">3.4. 
Flattening the DOM into an Element Tree</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="flat-tree">
   <b><a href="#flat-tree">#flat-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flat-tree">3.1. 
Informative Explanation of Shadow DOM</a>
    <li><a href="#ref-for-flat-tree①">3.4. 
Flattening the DOM into an Element Tree</a> <a href="#ref-for-flat-tree②">(2)</a> <a href="#ref-for-flat-tree③">(3)</a> <a href="#ref-for-flat-tree④">(4)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>